<template>
	<view class="tripRecommend">
		<headerNavbarVue></headerNavbarVue>
		<view class="header" :style="{top: navbarHeight + 'px'}">
			为您推荐
		</view>
		<view class="content-box">
			<view class="describeCard" v-for="(itme,index) in Tripdata" @click="toDetail(itme.shop_id)">
				<view class="imgBox">
					<image :src="imageUrl + itme.cover_image" mode=""></image>
					<view class="labelFlex">
						<view class="label">
							<image src="@/static/home/icon_design-tool_drafting-compass.png" mode=""></image>
							<text>{{itme.trip_day}}天{{itme.trip_night}}晚</text>
						</view>
						<text class="Selection">希望甄选</text>
					</view>
				</view>
				<view class="textBox">
					<text class="title">{{itme.title}}|回到远方的家 {{itme.trip_day}}天{{itme.trip_night}}晚</text>
					<text class="deputyTitle">{{itme.subtitle}}</text>
					<text class="content">{{itme.description}}</text>
					<view class="tags">
						<view class="tags-card" v-for="ite in itme.label_list" :key="itme">
							<text>{{ite}}</text>
						</view>
					</view>
					<view class="footer-box">
						<view class="price">
							<text>￥</text>
							<text>{{itme.display_price}}</text>
							<text class="NumberPeople">/人起</text>
						</view>
						<!-- 	<view class="look">
								<text>查看详情</text>
							</view> -->
					</view>

				</view>
			</view>
		</view>
		<view class="footer-button">
			<view class="button" @click="toDIYtrip">跳过推荐,继续创建</view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		navbarHeight
	} from '@/config/systemInfo.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetgetRecommendation
	} from '../../../config/API/Customize';
	import headerNavbarVue from '../../../components/headerNavbar.vue';
	import {
		imageUrl
	} from '../../../config/request/request'
	const Tripdata = ref([])
	const isAllTrip = ref([])
	onLoad(async (options) => {
		isAllTrip.value = options.selecttrip
		console.log('旅游选择', isAllTrip.value)
		nextTick(async () => {
			const data = await GetgetRecommendation(isAllTrip.value)
			Tripdata.value = data.data
			console.log('推荐商品===>>', Tripdata.value)
		})
	})
	
	let isProcessing = false; // 用于跟踪是否正在处理

	const toDIYtrip = async () => {
		if (isProcessing) return; // 如果已经在处理，则直接返回，防止重复点击

		try {
			isProcessing = true; // 标记为正在处理

			// 显示加载指示器
			uni.showLoading({
				title: '正在创建',
				mask: true // 注意这里应该是一个布尔值而不是字符串
			});

			// // 模拟异步操作（如果需要实际的异步逻辑，请替换这里的延时）
			// await new Promise(resolve => setTimeout(resolve, 500));

			// 导航到 DIY 页面并隐藏加载指示器
			uni.navigateTo({
				url: `/homeSubpages/customize/DIYtrip/DIYtrip?selecttrip=${isAllTrip.value}`
			});

			// 注意：uni.navigateTo 可能会立即改变页面，因此 hideLoading 应该放在 navigateTo 之前或确保在新页面加载后调用
			uni.hideLoading();

		} catch (error) {
			// 错误处理
			console.error('创建行程失败:', error);
			uni.showToast({
				title: '系统错误',
				icon: 'none'
			});
			uni.hideLoading();
		} finally {
			// 确保无论如何都会重置 isProcessing
			isProcessing = false;
		}
	};
	const toDetail = (id) => {
		uni.navigateTo({
			url: `/homeSubpages/ProductDetails/index?ShopId=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.tripRecommend {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;

		.header {
			width: 100%;
			height: 100rpx;
			font-size: 50rpx;
			font-weight: bold;
			background-color: #fff;
			position: sticky;
			z-index: 5;
			padding-left: 30rpx;
			box-sizing: border-box;
			line-height: 80rpx;
		}

		.content-box {
			width: 100%;
			min-height: 50vh;
			padding: 30rpx;
			padding-bottom: 220rpx;
			box-sizing: border-box;

			.describeCard {
				width: 100%;
				min-height: 450rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 45rpx 45rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				border: 1rpx solid #dedede;

				.imgBox {
					width: 100%;
					height: 370rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: 14rpx 14rpx 0 0;
					}

					.labelFlex {
						display: flex;
						align-items: center;
						gap: 15rpx;
						position: absolute;
						top: 25rpx;
						left: 20rpx;
						height: 30rpx;

						.label {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 10rpx;
							gap: 6rpx;
							height: 100%;
							border-radius: 6rpx;
							background: rgba(54, 48, 48, 1);
							font-size: 12rpx;
							font-weight: 400;
							color: rgba(232, 208, 149, 1);

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}

						.Selection {
							font-size: 16rpx;
							font-weight: 400;
							color: rgba(4, 75, 173, 1);
						}
					}
				}

				.textBox {
					width: 100%;
					padding: 26rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;

					text {
						display: block;
					}

					.title {
						font-size: 28rpx;
						font-weight: 700;
					}

					.deputyTitle {
						font-size: 26rpx;
						font-weight: 500;
					}

					.content {
						margin: 18rpx 0;
						font-size: 24rpx;
						color: rgba(125, 125, 125, 1);
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 7;
						overflow: hidden;
						text-overflow: ellipsis;
						// text-indent: 2em;
					}

					.tags {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						gap: 10rpx;

						.tags-card {
							padding: 10rpx 12rpx;
							border-radius: 12rpx;
							background-color: #f5f6f7;

							text {
								color: #888888;
								font-size: 24rpx;
							}
						}
					}

					.footer-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 20rpx 0;

						.price {
							display: flex;

							text {
								font-weight: 600;
							}

							.NumberPeople {
								margin-left: 10rpx;
								color: rgba(125, 125, 125, 1);
								font-weight: 500;
								font-size: 28rpx;
							}
						}

						.look {
							border-radius: 6rpx;
							border: 1rpx solid #000;
							padding: 10rpx;

							text {
								font-size: 34rpx;
							}
						}
					}

				}
			}

		}

		.footer-button {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			justify-content: center;
			padding: 25rpx 40rpx 70rpx 40rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #f1f1f1;

			.button {
				width: 100%;
				height: 100rpx;
				background-color: #000;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}
	}
</style>